<template>
	<view class="panorama">
		<u-loading-icon :show="loading" style="margin-top: 50rpx;"></u-loading-icon>
		<u-row v-show="!loading" align="center" justify="center" style="padding-top: 30rpx;height: 80%;" gutter="16">
			<u-col span="5.5">
				<image :src="leftUrl" style="width: 100%; height: 300rpx;position: relative;"></image>
				<image src="../../static/backCar.png" class="backCar" v-show="auxiliaryShow"></image>
			</u-col>
			<u-col span="5.5">
				<image :src="rightUrl" style="width: 100%;height: 300rpx;"></image>
			</u-col>
		</u-row>
		<u-row class="control">
			<u-col span="1.5">
				<u-text text="专注" @click="absorbedShow=true" prefixIcon="/static/focus.png"
					iconStyle="width:20rpx;height:15rpx;" align="center"></u-text>
			</u-col>
			<u-col span="1.5">
				<u-text text="标定" @click="openCalibration" prefixIcon="/static/calibration.png"
					iconStyle="width:20rpx;height:20rpx;" align="center"></u-text>
			</u-col>
			<u-col span="1.5">
				<u-text @click="close()" text="关闭" prefixIcon="/static/close_icon.png" iconStyle="width:20rpx;height:20rpx;"
					align="center"></u-text>
			</u-col>
		</u-row>
		<!-- 专注 -->
		<u-action-sheet :actions="list" :show="absorbedShow" @close="absorbedShow=false"
			@select="jump"></u-action-sheet>
		<!-- 标定 -->
		<u-popup :show="calibrationShow" @close="calibrationShow=false" class="calibration">
			<u-button text="去畸" :disabled="flag" @click="teratogenic" :hairline="false"></u-button>
			<u-collapse>
				<u-collapse-item title="摄像头列表" name="摄像头列表">
					<text class="camera" v-for="i in arr" @click="openCamera(i)">{{i.name}}</text>
				</u-collapse-item>
			</u-collapse>
		</u-popup>
	</view>
</template>

<script>
	import {
		getFisheyeImage,
		getPanoramicImage,
		getOriginal
	} from "@/config/api/panorama.js"
	export default {
		data() {
			return {
				// 状态
				loading:true,
				index: 0,
				//去畸按钮是否能点击
				flag: true,
				//标定列表
				calibrationShow: false,
				//专注列表
				absorbedShow: false,
				list: [{
						name: '前',
						code: 'front',
						fontSize: '15'
					},
					{
						name: '后',
						code: 'back',
						fontSize: '15'
					},
					{
						name: '左',
						code: 'left',
						fontSize: '15'
					},
					{
						name: '右',
						code: 'right',
						fontSize: '15'
					},
					{
						name: '360度',
						code: 'all',
						fontSize: '15'
					}
				],
				arr: [{
						name: '前',
						code: 'front'
					},
					{
						name: '后',
						code: 'back'
					},
					{
						name: '左',
						code: 'left'
					},
					{
						name: '右',
						code: 'right'
					}],
					//控制辅助线
					auxiliaryShow: false,
				// 鱼眼图像
				fisheyeImage: [],
				// 去畸图像
				original: [],
				// 全景
				panoramicImage: "",
				//左边地址
				leftUrl: "",
				// 右边地址
				rightUrl: "",
				// 路径
				baseUrl: uni.$u.http.config.baseURL,
				// 当前摄像头
				current: ""
			}
		},
		onLoad(){
			var that = this
			setTimeout(function(){
				that.loading = false
			},3000)
			this.auxiliaryShow=true
			// 获取鱼眼图像
			getFisheyeImage().then(res => {
				this.fisheyeImage = res
			})
			// 获取去畸图片
			getOriginal().then(res => {
				this.original = res
				this.leftUrl = this.baseUrl + this.original.back
			})
			// 获取全景
			getPanoramicImage().then(res => {
				this.panoramicImage = res.msg
				this.rightUrl = this.baseUrl + this.panoramicImage
			})
		},
		methods: {
			// 专注处理
			jump(data) {
				if (data.code == "all") {
					this.leftUrl = this.baseUrl + this.panoramicImage
					return
				}
				this.auxiliaryShow=false
				this.current = data.code
				this.leftUrl = this.baseUrl + this.fisheyeImage[data.code]
			},
			// 打开标定列表
			openCalibration() {
				this.calibrationShow = true
				this.index++
				if(this.index==2){
					this.flag = false
				}
			},
			// 去畸
			teratogenic(){
				this.leftUrl = this.baseUrl+this.original[this.current]
				if(this.current == 'back'){
					this.auxiliaryShow=true
				}
				this.calibrationShow = false
			},
			// 标定处理
			openCamera(data) {
				this.auxiliaryShow=false
				this.current = data.code
				this.leftUrl = this.baseUrl + this.fisheyeImage[data.code]
				this.calibrationShow = false
			},
			close(){
				uni.redirectTo({
					url:"/pages/desktop/index"
				})
			}
		}
	}
</script>

<style scoped>
	.panorama {
		width: calc(100% - 50px);
		height: 100%;
		margin: 0 auto;
	}

	.control {
		width: 100%;
		position: absolute;
		bottom: 5rpx;
		left: 32%;
	}

	.calibration {
		text-align: center;
	}

	.camera {
		margin: 5rpx 0;
	}
	.backCar{
		width: 35%;
		height: 40%;
		position: absolute;
		left: 10%;
		top: 30%;
	}
</style>